<template>
  <div>
     <table cellpadding="0" cellspacing="0" v-if="files && files.length > 0">
      <tr>
        <td colspan="6" class="oa-form__table-hd">附件信息</td>
      </tr>
      <tr class="_name">
        <td>附件名称</td>
        <td>上传者</td>
        <td>上传时间</td>
        <td width='200'>操作</td>
      </tr>
      <tr v-for="( item, index ) in files " :key="index">
        <td>{{item.name}}</td>
        <td>{{item.truename}}</td>
        <td>{{item.created_at}}</td>
        <td>
          <el-popconfirm
                title="确定要将此接口删除吗?"
                style="margin:0 10px;"
                @confirm="del(item.id)"
              >
                <el-button slot="reference" type="text" size="small"
                  >删除</el-button
                >
              </el-popconfirm>
          <el-button @click="prevView(item.path)">预览</el-button>
          <el-button type="primary" @click="downLoad(item.path)">下载</el-button>
        </td>
      </tr>
    </table>
    <div class="oa-form__pop" v-if="showIframe">
        <div src="@/assets/images/close.png" alt="" class="oa-form__pop-close">
           <i class="el-icon-circle-close" @click="showIframe = false"></i>
        </div>
        <iframe width="800" height="500" :src="iframeSrc" frameborder="0" class="oa-form__pop-iframe"></iframe>
    </div>
  </div>
</template>
<script>
import { delDoc } from '@/api/oa/index.js'
export default {
  data () {
    return {
      // url: 'http://oss.tead.com.cn/'
      showIframe: false,
      iframeSrc: ''
    }
  },
  computed: {
    files () {
      console.log(this.$store.state.files)
      return this.$store.state.files
    }
  },
  created () {
    // this.approve = JSON.parse(window.localStorage.getItem('approve'))
  },
  mounted () {
    this.$nextTick(() => {
      if (this.$route.query.from !== 'new') {
        this.$store.dispatch('filesDo')
      } else {
        this.$store.commit('changeFile', [])
      }
    })
  },
  methods: {
    downLoad (path) {
      window.open(path, '_blank')
    },
    prevView (path) {
      this.showIframe = true
      this.iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${path}`
    },
    del (id) {
      const params = {
        file_id: id
      }
      delDoc(params).then(res => {
        this.$store.dispatch('filesDo')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.oa-form__pop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 1000;
    background-color: rgba(0,0,0,.5);
    &- {
      &iframe {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: -webkit-translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
      &close {
        width:60px;
        height:60px;
        position: fixed;
        top: 15%;
        left: 50%;
        padding-left: 500px;
        .el-icon-circle-close {
          font-size: 30px;
          cursor: pointer;
          &:before {
            color: #fff;
          }
        }
      }
    }
}
</style>
